<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-dialog class="skin_cus_add" v-model="props.visible" title="自定义材料和厚度" @close="handleVisible('cancel')">
    <el-form ref="formRef" size="small" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="属性代码" prop="attributeCode">
        <el-input placeholder="请输入" v-model="formData.attributeCode" disabled />
      </el-form-item>
      <el-form-item label="材料类型" prop="type" required>
        <el-select v-model="formData.type" placeholder="请选择" @change="handleChange">
          <el-option label="金属" value="metal"></el-option>
          <el-option label="复合材料" value="composite"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="材料编号" prop="material" required>
        <el-select v-model="formData.material" placeholder="请选择" filterable>
          <el-option :label="item.label" :value="item.label" v-for="item in metals"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单层厚度" prop="thickness" required>
        <el-input placeholder="请输入" v-model="formData.thickness" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="handleVisible('cancel')">取消</el-button>
        <el-button size="small" type="primary" @click="handleVisible"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script name="SkinCustomerAdd" setup>
import { materialList } from '@/api/layupLibrary';
import { getCompositeMaterialList } from '@/api/lyingWarehouse';

const formRef = ref(null);
const rules = ref({
  attributeCode: [{ required: true, message: '请输入属性代码', trigger: 'blur' }],
  type: [{ required: true, message: '请选择材料类型', trigger: 'blur' }],
  material: [{ required: true, message: '请选择材料代码', trigger: 'blur' }],
  thickness: [{ required: true, message: '请输入厚度', trigger: 'blur' }],

});
const props = defineProps(['visible', 'rowData']);
const emit = defineEmits(['handleEvent']);
const metals = ref([]);
const attributeCode = props?.rowData;
console.log("rowData:" + props?.rowData)
const formData = ref({
  attributeCode: '',
  type: '',
  material: '',
  thickness: ''
});
if (attributeCode) {
  formData.value.attributeCode = attributeCode;
}
const handleVisible = (type) => {
  if (type === 'cancel') {
    emit('handleEvent',{ type: 'cancel'});
  } else {
    formRef.value.validate((valid) => {
      if (valid) {
        emit('handleEvent', { type: 'refresh', data: formData.value });
      } else {
        console.log('error submit!!');
        return false;
      }
    });
    
  }
};
const handleChange = (event) => {
  if (event === 'metal') {
    materialList({ materialName: '', materialNumber: '', pageNum: 1, pageSize: 9999 }).then((res) => {
      if (res.code === 200) {
        console.log('MATERIAL', res);
        metals.value = res.rows.map((item) => {
          return { label: item.materialNumber, value: item.materialNumber };
        });
      }
    });
  } else {
    getCompositeMaterialList({
      pageNum: 1,
      pageSize: 9999,
      materialName: '',
      materialNumber: ''
    }).then(res => {
      metals.value = res.rows.map(item => ({
        label: item.materialNumber,
        value: item.materialNumber
      }));
    })
  }
};
</script>
<style lang="scss" scoped>
.add_metal_library {
  user-select: none;
}
</style>
